<template>
  <div>
      <div class="content">
        <div class="main">
            <div class="log">
                <li>
                    <a href="#"></a>
                    <input type="text" v-model="phone" placeholder="请输入您的账号">
                </li>
                <li>
                    <a href="#"></a>
                    <input type="password" v-model="pwd" placeholder="请输入您的密码">
                </li>
            </div>
            <div class="button">
          <button @click="login">登录</button>
      </div>
      <div class="other">
          <router-link to="register">
          <span>注册账号</span>
          </router-link>
          <span class="wechat" @click="wxlogin()">微信登录</span>
      </div>
        </div>
      </div>
  </div>
</template>

<script>
import api from "../axios/api.js";
export default {
    data(){
        return{
            phone:'',
            pwd:'',
            url:"",
            code:null,
        }
    },
    mounted(){
         if(localStorage.getItem("id")){
              this.$router.push('/home')
        }
        if(localStorage.getItem("phone")){
        setTimeout(function(){
              this.$router.push('/home')
          }.bind(this),300)
        }
       
        this.code =  this.getCode()
        if(this.code){
             this.getuserinfo()
        }
        
    },
    methods:{
         login(){
            
            let data = {
            phone: this.phone,
            pwd:this.pwd,
            };
        this.$post(api.login,data).then(res => {
        if (res.code == 200) {
            localStorage.setItem("ID",res.data.id)
             localStorage.setItem("phone",this.phone)
        //   this.$toast.success(res.msg);
          setTimeout(function(){
              this.$router.push('/home')
          }.bind(this),1000)
         
              }else{
          this.$toast.fail(res.msg);
        }
      });
        },
        getuserinfo(){
 
            this.code =  this.getCode()
    
            this.$post(api.wxurl,{code:this.code}).then(res=>{
                  
                    if(res.code==200){
                         console.log(res.data)
                        //成功返回处理
                       localStorage.setItem("id",res.data['id'])
                       localStorage.setItem("wx",'1')
                       localStorage.setItem("headimgurl",res.data['headimgurl'])
                       localStorage.setItem("nickname",res.data['nickname'])
                       this.$router.push("user") 
                    }
                })
        },

        getCode() {
      let url = window.location.search;
      console.log(url)
      let start = window.location.search.indexOf("=");
      let end = window.location.search.indexOf("&");
      let code = url.substring(start + 1, end);
      return code;
    },
        wxlogin(){
            
            //抓取页面code
            console.log('抓取');
            //判断code是否存在
       
                
                // this.$toast(this.code)
           
            if(!this.code){
                
                window.location.href = api.wxlogin

                return false;

            }


          
            
        }
    }
                    
                
            
}
</script>

<style lang="less" scoped>
    .content {
        width: 100%;
        height: 667px;
        background: url("../assets/login_02.png") no-repeat;
        background-size: 100%;
        .main {
            margin: 0 auto;
            .log{
                padding-top: 70%;
                margin: 0 auto;
                >li:nth-child(2){
                    a{
                        width: 16px;
                        height: 22px;
                        margin-left: 18px;
                        background: url("../assets/pwd.png") no-repeat;
                        background-size: 100%;
                    }
                    input{
                        margin-left: 20px;
                    }
                    }
                li {
                    list-style: none;
                    display: flex;
                    align-items: center;
                    width: 70%;
                    height: 30px;
                    margin: 0 auto;
                    background-color: #ececec;
                    border-radius: 10px;
                    padding: 10px 0px;
                    margin-top: 10px;
                    a{
                        display: block;
                        width: 30px;
                        height: 30px;
                        margin-left: 10px;
                        background: url("../assets/user.png") no-repeat;
                        background-size: 100%;
                    }
                    input{
                        border: none;
                        margin-left: 10px;
                        font-size: 13px;
                        background-color: #ececec;
                    }
                }
            }
        }
    }
    .other {
        margin-top: 30px;
        display: flex;
        justify-content: space-around;
        span {
            font-size: 13px;
            color: #b3b4b5;
            display: flex;
            align-items: center;
         
        }
        .wechat::before{
            content: "";
            width: 20px;
            height: 20px;
            background: url("../assets/wechat.png") no-repeat;
            background-size: 100%;
            border-radius: 50%;
            margin-right: 5px;
        }
    }
    .button{
    width: 100%;
    text-align: center;
    margin-top: 10px;
    button{
        width: 270px;
        height: 45px;
        background-color: #05aaec;
        margin-top: 20px;
        border: 0;
        border-radius: 35px;
        color: white;
        
    }
}
</style>